<style>
    .activity{
        color:#171717;
        font-weight: 600;
        font-size: 14px;
    }
    .noactivity{
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #929292;
    }
    .el-table {
        overflow: visible !important;
    }
    .mainTable td{
        height: 64px !important;
    }
    .mainTable1 td{
        height: 64px !important;
    }
    .mainTable1 .el-table--striped .el-table__body tr.el-table__row--striped td {
        background-color:rgba(46, 135, 246, 0.04) !important; /* def2ff f2faff */
    }
    .mainTable1 th{
        background-color:rgba(46, 135, 246, 0.12) !important; /* def2ff f2faff */
        font-size: 16px !important;
        font-family: PingFang SC, PingFang SC !important;
        font-weight: 500 !important;
        color: #646464 !important;
        height: 50px !important;
    }






    .mainTable .el-table--striped .el-table__body tr.el-table__row--striped td {
        background-color:rgba(255, 180, 68, 0.04) !important; /* def2ff f2faff */
    }
    .mainTable1 tr td:first-child{
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #1066E8;

    }
    .mainTable1 .has-gutter td:first-child{
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #929292;
    }

    .mainTable th{
        background-color:rgba(255, 180, 68, 0.12) !important; /* def2ff f2faff */
        font-size: 16px !important;
        font-family: PingFang SC, PingFang SC !important;
        font-weight: 500 !important;
        color: #646464 !important;
        height: 64px !important;
    }
    .cell-class-name{
        border: 0 !important;
    }
    .mainTable tr td:not(:first-child){
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #FFB444;
    }
    .mainTable tr td:first-child{
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #171717
    }
    .search_btn{
        width: 80px;
        height: 40px;
        background: #2E87F6;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
    }
    .export_btn{
        width: 80px;
        height: 40px;
        background: #45CF48;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
    }
</style>
<script>
    let reportComponent = {
        template: `


<div style="background: rgb(245, 246, 250);width: 100%;">

       <div style="width: 100%;height: 50px;background-color: #FFF;display: flex;align-items: center;">
        <div style="width: 10px"></div>
        <el-select  placeholder="项目" size="medium" style="width: 300px" clearable filterable  v-model="project_id"  >
            <el-option
            label="全部项目"
            value="">
            </el-option>
            <el-option
            v-for="item in projectList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
            </el-option>
            </el-select>
                <el-date-picker type="datetimerange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="selectedYearRecord" @change="changeRangeDate"  style="width: 300px;height: 40px;margin-left: 30px">

                </el-date-picker>
            <div style="width: 20px"></div>
            <div class="search_btn" @click="recresh()">查询</div>
            <div style="width: 20px"></div>
            <div class="export_btn" @click="exportDealogShow = true">导出</div>

        </div>

       <div style="margin: 20px">
       </div>

       <div style="height: 162px;background-color: #FFF;margin-left: 24px;margin-right: 24px">
            <div style="height: 48px;line-height: 48px;font-size: 14px;font-weight: 600;padding-left: 20px;">财务收支利润</div>
            <div style="display: flex;justify-content: space-between;padding-left: 20px;padding-right: 20px" >
                <div style="width: 181px;height: 98px;background-color: #F8F8F8" @click="showReCords(10)">
                    <div style="background-color: rgba(255, 192, 61, 0.20);width: 100%;height: 4px">
                        <div style="width: 50%;height: 4px;background-color: rgba(255, 192, 61, 1)"></div>
                    </div>
                    <div style="color: #929292;font-size: 14px;padding-left: 20px;padding-top: 16px;font-weight: 500">
                        总收入
                    </div>
                    <div style="color: #FFC03D;font-size: 24px;padding-left: 20px;padding-top: 16px;font-weight: bold">
                        {{countDebt['in_format']}}
                    </div>
                </div>
                <div style="width: 181px;height: 98px;background-color: #F8F8F8" @click="showReCords(20)">
                    <div style="background-color: rgba(69, 207, 72, 0.20);width: 100%;height: 4px">
                        <div style="width: 50%;height: 4px;background-color: #45CF48"></div>
                    </div>
                    <div style="color: #929292;font-size: 14px;padding-left: 20px;padding-top: 16px;font-weight: 500">
                        总支出
                    </div>
                    <div style="color: #45CF48;font-size: 24px;padding-left: 20px;padding-top: 16px;font-weight: bold">
                     {{countDebt['out_format']}}
                    </div>
                </div>
                <div style="width: 181px;height: 98px;background-color: #F8F8F8">
                    <div style="background-color: rgba(50, 153, 235, 0.20);width: 100%;height: 4px">
                        <div style="width: 50%;height: 4px;background-color: #3299EB"></div>
                    </div>
                    <div style="color: #929292;font-size: 14px;padding-left: 20px;padding-top: 16px;font-weight: 500">
                        利润
                    </div>
                    <div style="color: #3299EB;font-size: 24px;padding-left: 20px;padding-top: 16px;font-weight: bold">
                        {{countDebt['debt_format']}}
                    </div>
                </div>

                <div style="width: 181px;height: 98px;background-color: #F8F8F8">
                    <div style="background-color: rgba(255, 192, 61, 0.20);width: 100%;height: 4px">
                        <div style="width: 50%;height: 4px;background-color: rgba(255, 192, 61, 1)"></div>
                    </div>
                    <div style="color: #929292;font-size: 14px;padding-left: 20px;padding-top: 16px;font-weight: 500">
                        应收未收
                    </div>
                    <div style="color: #FFC03D;font-size: 24px;padding-left: 20px;padding-top: 16px;font-weight: bold">
                        {{countDebt['yfs']}}
                    </div>
                </div>
                <div style="width: 181px;height: 98px;background-color: #F8F8F8">
                    <div style="background-color: rgba(69, 207, 72, 0.20);width: 100%;height: 4px">
                        <div style="width: 50%;height: 4px;background-color: #45CF48"></div>
                    </div>
                    <div style="color: #929292;font-size: 14px;padding-left: 20px;padding-top: 16px;font-weight: 500">
                        应付未付
                    </div>
                    <div style="color: #45CF48;font-size: 24px;padding-left: 20px;padding-top: 16px;font-weight: bold">
                        {{countDebt['yff']}}
                    </div>
                </div>
                <div style="width: 181px;height: 98px;background-color: #F8F8F8">
                    <div style="background-color: rgba(50, 153, 235, 0.20);width: 100%;height: 4px">
                        <div style="width: 50%;height: 4px;background-color: #3299EB"></div>
                    </div>
                    <div style="color: #929292;font-size: 14px;padding-left: 20px;padding-top: 16px;font-weight: 500">
                        核算后利润
                    </div>
                    <div style="color: #3299EB;font-size: 24px;padding-left: 20px;padding-top: 16px;font-weight: bold">
                        {{countDebt['hdebt']}}
                    </div>
                </div>
            </div>
       </div>


    <!--流水报表-->

    <div style="background-color: #FFF;margin-top: 10px;margin-left: 24px;margin-right: 24px;height: 400px;border-radius: 10px">
        <div style="display: flex;align-items: center;width: 100%;height: 48px;border-top-left-radius: 10px;border-top-right-radius: 10px">
            <div style="width: 10px"></div>
            <div :class ="{'activity':record_list_type==10,'noactivity':record_list_type==20}"  style="height: 30px;line-height: 30px;text-align: center;" @click="showRecordListData(10)">收入流水（分类）</div>
            <div style="width: 10px"></div>
            <div  :class ="{'activity':record_list_type==20,'noactivity':record_list_type==10}" style="height: 30px;line-height: 30px;text-align: center" @click="showRecordListData(20)">支出流水（分类）</div>
            <div style="flex: 1"></div>
            <el-select size="mini"  placeholder="分类类型" v-model="groupRecordType" size="medium"  @change="selectDisposeCode">
            <el-option
            label="按照一级分类"
            value="1">
            </el-option>
            <el-option
            label="按照二级分类"
            value="2">
            </el-option>
            </el-select>
        </div>


        <div style="display: flex;height: 352px;">
            <div style="flex: 1">
                    <div id="categoryProject" class="statBox" style="height: 302px;width: 90%"></div>
            </div>
                <div style="width: 30px"></div>
            <div style="flex: 1;" class="mainTable1">
                <el-table
                        ref="tableData"
                        height="302"
                        :data="record_list_data"
                        show-summary
                        stripe
                        cell-class-name = 'cell-class-name'
                        >
                        <el-table-column
                        prop="category_parent_str"
                        label="类别">
                             <template scope="scope">
                                  <div @click="showReCordsTypeCategory(scope.row.category_parent_id,scope.row.category_child_id)">{{ scope.row.category_parent_str }}</div>
                                </template>
                        </el-table-column>
                        <el-table-column
                        prop="amounts"
                        label="总金额" >
                        </el-table-column>
                        <el-table-column
                        prop="percent"
                        label="比例" >
                        </el-table-column>
               </el-table>
            </div>
        </div>
    </div>



    <div style="background-color: #FFF;margin: 10px 24px;min-height: 350px;border-radius: 10px">
            <div style="height: 48px;line-height: 48px;font-size: 14px;font-weight: 600;padding-left: 20px;">挂账情况</div>
            <div style="display: flex;min-height: 302px">
                <div style="flex: 1;">
                    <div id="statProjectGua" class="statBox" style="height: 302px;width: 90%"></div>
                </div>
                <div style="width: 30px"></div>

                <div style="flex: 1;padding-right: 20px" class="mainTable">
                <el-table
                        :data="gua_count_debt"  stripe cell-class-name="cell-class-name">
                        <el-table-column
                        prop="type_str"
                        label="类别">
                        </el-table-column>
                        <el-table-column
                        prop="amounts"
                        label="总金额" >
                          <template scope="scope">
                             <div @click="showArapReCordsTypeCategory(scope.row.type,scope.row)">{{ scope.row.amounts }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                        prop="leiji"
                        label="累计核销金额" >
                        </el-table-column>
                        <el-table-column
                        prop="mamounts"
                        label="当月核销金额" >
                        </el-table-column>
                        <el-table-column
                        prop="wamounts"
                        label="未核销金额" >
                        </el-table-column>
               </el-table>
                </div>
            </div>
    </div>



      <!-- 收入或者指出流水       -->
      <record-details-report
                    :category_parent_id="record_list_category_id"
                    :category_child_id="category_child_id"
                    :project_id = "project_id"
                    :type="recordType"
                    :dialogShow="recordDetailsReportShow"
                    :begin_date="begin_date"
                    :end_date="end_date"
                    @modalClose="recordDetailsReportClose"/>
      <arap-details-report   :project_id = "project_id"
                             :type="arapRecordType"
                             :dialogShow="arapRecordDetailsReportShow"
                             :begin_date="begin_date"
                             :end_date="end_date"
                             @modalClose="arapRecordDetailsReportClose" />

      <future-details-report :project_id = "project_id"
                             :type="futureRecordType"
                             :dialogShow="futureRecordDetailsReportShow"
                             :begin_date="begin_date"
                             :end_date="end_date"
                             @modalClose="futureRecordDetailsReportClose" />


        <report-export
           :dialogShow="exportDealogShow"
           @modalClose="exportsReportClose"
           :project_id="project_id"
           :groupRecordType="groupRecordType"
        />


</div>
    `,
        computed: {
            customList () {
                return this.$store.state.customList
            },
            gysList () {
                return this.$store.state.gysList
            },
            storeList() {
                return this.gysList.concat(this.customList)
            },
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            projectList() {
                return this.$store.state.projectList
            }

        },
        data:function(){
            return {
                gua_count_debt:[],
                record_list_data:[],
                recordDetailsReportShow:false,
                arapRecordDetailsReportShow:false,
                futureRecordDetailsReportShow:false,
                recordType:20,
                record_list_type:10,
                arapRecordType:10,
                futureRecordType:10,
                record_list_category_id:null,
                category_child_id:null,
                exportDealogShow:false,
                countDebt:{
                    'in_format':'0.00',
                    'out_format':'0.00',
                    'debt_format':'0.00',
                    'yfs':'0.00',
                    'yff':'0.00',
                    'hdebt':'0.00'
                },
                begin_date:'',
                end_date:'',
                project_id:'',
                selectedYearRecord:'',
                groupRecordType:"1"
            }
        },
        updated() {
            this.$nextTick(()=>{
                // this.$refs.tableData.doLayout();
            })
        },
        mounted(){
            let that = this;

            this.get_count_debt_analysis()
            this.get_gua_count_anslysis()
            this.record_count_analysis()
        },
        methods:{
            onTableRowClassName(row, rowIndex){
                if (rowIndex%2==0) {
                    return 'statistics-warning-row';
                } else {
                    return '';
                }
            },
            showReCordsTypeCategory(category_id,category_child_id){
                console.log("======>")
                this.record_list_category_id = category_id;
                this.category_child_id = null;
                if(this.groupRecordType == 2){
                    this.category_child_id = category_child_id;
                }
                this.recordType = this.record_list_type;
                this.recordDetailsReportShow = true;
            },
            showArapReCordsTypeCategory(type,row){
                if(row['type_str_text'] === 0){
                    this.arapRecordType = type;
                    this.arapRecordDetailsReportShow = true;
                }else{
                    this.futureRecordType = type
                    this.futureRecordDetailsReportShow = true
                }
            },
            showRecordListData(typeValue){
                if(typeValue != this.record_list_type){
                    this.record_list_type = typeValue
                    this.record_count_analysis()
                }
            },
            showReCords(typeValue){
                this.recordType = typeValue;
                this.record_list_category_id = null;
                this.category_child_id = null;
                this.recordDetailsReportShow = true;
            },
            recordDetailsReportClose(){
                this.recordDetailsReportShow = false;
            },
            arapRecordDetailsReportClose(){
               this.arapRecordDetailsReportShow = false;
            },
            futureRecordDetailsReportClose(){
                this.futureRecordDetailsReportShow = false;
            },
            exportsReportClose(){
                this.exportDealogShow = false;
            },
            changeRangeDate(value){
                if(value != null){
                    this.begin_date = value[0];
                    this.end_date = value[1];
                }else{
                    this.begin_date = ''
                    this.end_date = ''
                }
            },

            recresh(){
                this.get_count_debt_analysis()
                this.get_gua_count_anslysis()
                this.record_count_analysis()
            },
            //更换项目
            selectDisposeCode(){
                this.get_count_debt_analysis()
                this.get_gua_count_anslysis()
                this.record_count_analysis()
            },
            record_count_analysis(){
                let that = this
                let parmas = {
                    tally_id:that.currentTallyId,
                    begin_date:this.begin_date,
                    end_date:this.end_date,
                    project_id:that.project_id,
                    type:that.record_list_type,
                    groupRecordType:this.groupRecordType
                };
                axios.post('/api/tally-stat-report/record-count-analysis',parmas,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.record_list_data = res.data.data['results_list'];
                        let xData = [] ;
                        let monthyInChartData = [] ;
                        // 表格展示 收入
                        // that.record_list_data.forEach(v=>{
                        //     xData.push(v.category_parent_str);
                        //     monthyInChartData.push(parseFloat(v.amounts));
                        // });
                        renderCategoryProject(that.record_list_data,res.data.data['amount']);
                        that.$nextTick(()=>{
                            that.$refs.tableData.doLayout();
                        })
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            get_gua_count_anslysis(){
                let that = this
                let parmas = {
                    tally_id:that.currentTallyId,
                    begin_date:this.begin_date,
                    end_date:this.end_date,
                    project_id:that.project_id
                };

                axios.post('/api/tally-stat-report/gua-count-anslysis',parmas,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.gua_count_debt = res.data.data;
                        let xData = [] ;
                        let monthyInChartData = [] ;
                        let monthyOutChartData = [] ;
                        let monthyProChartData = [] ;
                        // 表格展示 收入
                        res.data.data.forEach(v=>{
                            xData.push(v.type_str);
                            monthyInChartData.push(parseFloat(v.amounts));
                            monthyProChartData.push(parseFloat(v.wamounts));
                            monthyOutChartData.push(parseFloat(v.leiji));
                        });

                        renderZhuReport('statProjectGua',xData,[{
                            name: '总金额',
                            data: monthyInChartData
                        }, {
                            name: '未核销金额',
                            data: monthyProChartData
                        }, {
                            name: '累计核销金额',
                            data: monthyOutChartData
                        }]);
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            get_count_debt_analysis(){
                let that = this
                let parmas = {
                    tally_id:that.currentTallyId,
                    begin_date:this.begin_date,
                    end_date:this.end_date,
                    project_id:that.project_id
                };

                axios.post('/api/tally-stat-report/count-debt-analysis',parmas,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.countDebt = res.data.data
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            }

        },


    }
</script>